import { useState,useEffect} from "react";
import Taro,{useDidShow} from '@tarojs/taro';
import { Picker ,Image} from '@tarojs/components'
import Styles from './index.module.less';
import InvertTriangle from '../../images/book/b_tri.png'
import Location from '../../images/book/location.png'
import { getGlobalData ,Request} from "../../util";
import {connect} from 'react-redux';

function index(props)
{

    const domain = getGlobalData("domain");

    const [multiArray, setMultiArray] = useState([]);

    const [multiIndex, setMultiIndex] = useState([]);

    const [allStoreName, setAllStoreName] =  useState([]);

    const [allStoreAddress, setAllStoreAddress] = useState([]);

    const [selectedStore, setSelectedStore] = useState(Taro.getStorageSync('selectedStore'));

    const [selectedAddress, setSelectedAddress] = useState("");

    useEffect(()=>{
        Taro.setStorageSync("selectedStore",selectedStore);
        props.sendSelectedStore();
    },[selectedStore])
    

    useDidShow(()=>{
        Request(domain + "/client/store/storeListForBookPage",{store:Taro.getStorageSync("selectedStore")}).then((res)=>{
            return res.data.data;
        }).then((e1)=>{
            Request(domain+"/client/region/regionListForBookPage",{store:Taro.getStorageSync("selectedStore")}).then((res)=>{

                let e2=res.data.data;
                setSelectedStore(e1[0]);
               
                let e3=[];
                e3.push(e2);
                e3.push(e1);
       
                setMultiArray(e3);
                
            })
        });
        setMultiIndex([0,0]);
        Request(domain+"/client/store/allStoreListForBookPage",{store:Taro.getStorageSync("selectedStore")}).then((res)=>{
            let e = res.data.data;
            setAllStoreName(e['storeName'])
            setAllStoreAddress(e['storeAddress']);
            setSelectedAddress(e['storeAddress'][0][0]);
        })
    })

    const bindMultiPickerColumnChange = (e) => {
        if(e.detail.column == 0){
            setMultiArray([multiArray[0],allStoreName[e.detail.value]]);
        }

        let newMultiIndex = multiIndex;

        newMultiIndex[e.detail.column] = e.detail.value;
        
        setMultiIndex(newMultiIndex);
    }

    const bindValueChange = (e) => {
        let store=allStoreName[e.detail.value[0]][e.detail.value[1]];
        let address = allStoreAddress[e.detail.value[0]][e.detail.value[1]];
        setSelectedStore(store);
        setSelectedAddress(address);
        Taro.setStorageSync("selectedStore",selectedStore);
    }



    return (
        <view class={Styles.store_picker_wrap}>
            <Picker class={Styles.store_picker} mode="multiSelector" range={multiArray} value={multiIndex} onColumnChange={bindMultiPickerColumnChange} onChange={bindValueChange}>
                <view class={Styles.store_name_wrap}>
                    <view class={Styles.store_name}>
                        {selectedStore}
                    </view>

                    <Image src={InvertTriangle} class={Styles.invertTriangle}></Image>
                </view>

                <view class={Styles.address_wrap}>
                    <Image src={Location} class={Styles.location}></Image>
                    <view class={Styles.address}>{selectedAddress}</view>
                </view>
            </Picker>

        </view>
    )
}

const mapDispatchToProps = (dispatch) => {
    return {
        sendSelectedStore:()=>{
            dispatch({
                type:"SELECTEDSTORE"
            })
        }
    }
}

export default connect(null,mapDispatchToProps)(index);